//显示用户列表
// 分为两步
// 1. 使用ajax请求后台数据
// 2. 使用模板引擎渲染数据
$.ajax({
	type:'get',
	url:'/users',
	success:function(res){
		console.log(res);
		//template方法第二项参数是数据，数据一定要是一个对象
		//data就是对象的key键
		var html = template('usersTpl',{data:res})
		$('#usersBox').html(html)
	}
})


// serialize()可以自动收集所有的带有name属性的表单元素


//用户添加功能
// 注意事项：邮箱唯一，如果你添加一个之前已经有的邮箱，添加失败
// 思路一：
$('#userForm').on('submit',function(){
	//收集表单数据
	// serialize方法可以收集到当前表单中所有的input带有name属性 key,和值
	var data = $(this).serialize()//this是dom对象 如果想要使用jq的方法，必须用$包装成一个jq对象
	$.ajax({
		type:'post',
		url:'/users',
		data:data,
		success:function(res){
			location.reload()//页面刷新
		},
		error:function(){
			alert('用户添加失败')
		}
	})
	return false;
})


//添加头像功能（复杂）
// 快递
// 1. 全是零食（百草味） 一堆  打包在一起，用一个快递来发货
// 2. 一些零食，冰箱，电视 每个东西单独发一个快递，安全一点
// post请求方式
// 1. 全部是普通类型的表单元素 username=jack&age=20 请求头信息 application/x-www-form-urlencoded
// 2. 带有部分二进制类型的表单元素（图片上传） 电影mp4(1G) 二种生物 multipart/form-data FormData收集数据
//新增表单中的input[type=file]
//绑定事件的这个input[type=file]已经移除掉，现在

// 面试时候事件委托的好处？
// 1. 提高性能 一堆元素绑定事件变成给它们父元素绑定事件
// 2. 可以为当前还不存在，即将创建出来的元素提前绑定事件（不用事件委托也是可以，但是代码写得不好看）

$('#modifyBox').on('change','#avatar',function(){
	var formData = new FormData();//二进制文件数据
	// Blob是H5提示内置的对象 binary large object
	// console.log(this.files[0] instanceof Blob);
	// this.files[0]这个就是我们的图片的二进制数据
	formData.append('avatar',this.files[0]);//得到二进制数据，保存到formData当中

	// $.ajax是jq帮我们封装的一个方法
	// 默认会把我们的数据变成a=1&b=2这种形式
	// 原生ajax xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
	// xhr.send('a=1&b=2')
	$.ajax({
		type:'post',
		url:'/upload',
		data:formData,
		processData:false,//告诉$.ajax内部不要对传递的数据进行序列化
		contentType:false,//告诉$.ajax内部不要帮我们设置请求头信息
		success:function(res){
			console.log(res);
			// 隐藏域 前台给后台送礼（偷偷送给 光明正大的给）
			$('#hiddenImg').val(res[0].avatar)//给隐藏域设置value值
			$('#preview').attr('src',res[0].avatar)// 图片预览 修改默认头像src值，这样添加成功用户就可以看到一个反馈
		}
	})
})


//编辑功能
// 一定要用事件委托来写，原因
// 1. 性能会得到提升
// 2. ajax是异步，我们这块如果不用事件委托的话，这个代码是无效的
// console.log($('#usersBox').find('tr').length);


// 1. 邮箱不能编辑
// 2. 密码不修改

//展示编辑信息
$('#usersBox').on('click','.edit',function(){
	var id = $(this).attr('data-id');
	$.ajax({
		type:'get',
		url:'/users/'+id,
		success:function(res){
			console.log(res);
			var html = template('modifyTpl',res);
			$('#modifyBox').html(html);

		}
	})
})

//保存用户修改的信息
// $('#modifyForm').on('submit')
// console.log($('#modifyForm').length);//0
//事件委托
//如果我们想要使用一个东西，这个东西必须提前存在
$('#modifyBox').on('submit','#modifyForm',function(){
	var data = $(this).serialize()
	var id = $(this).attr('data-id')
	$.ajax({
		type:'put',
		url:'/users/'+id,
		data:data,
		success:function(){
			location.reload();
		}
	})
})

// 删除功能
// 和编辑功能类似
// 事件委托来绑定事件
// 根据id来删除
// 提前使用自定义属性data-id把id值提前存起，attr获取
$('#usersBox').on('click','.delete',function(){
	var id = $(this).attr('data-id');
	if(confirm('确定真的要删除吗?')){
		$.ajax({
			type:'delete',
			//反引号 在tab键上面
			url:`/users/${id}`,
			success:function(){
				location.reload();
			}
		})
	}
})


//批量删除第一步 给全选复选框添加change事件，当它的状态改变的时候，我们让tbody中所有的复选框同步状态
$('#selectAll').on('change',function(){
	var status = $(this).prop('checked');
	//同步到tbody中所有的复选框
	$('#usersBox .userStatus').prop('checked',status);
	if(status == true){
		$('#deleteMany').show();
	}else{
		$('#deleteMany').hide();
	}
})

//批量删除第二步 给tbody中所有的复选框绑定事件，当所有的复选框全部选中，thead中全选也是选中
$('#usersBox').on('change','.userStatus',function(){
	//只要全选的数量和复选框数量相等，说明是全选
	// :checked是jq提供的选择器，可以用来选中的复选框或单选按钮
	if($('#usersBox .userStatus').length == $('#usersBox .userStatus:checked').length){
		$('#selectAll').prop('checked',true)
	}else{
		$('#selectAll').prop('checked',false)
	}

	if($('#usersBox .userStatus:checked').length > 1){
		$('#deleteMany').show();
	}else{
		$('#deleteMany').hide();
	}
})

//批量删除第三步
//如果你想使用一个东西，这个东西必须提前存在
//思路一：像视频中一样，构建一个空的数组 push进去 join('-')
//思路二：用字符串拼接
$('#deleteMany').on('click',function(){
	//收集所有的要删除的行的 对应的id值
	// forEach(es5提供的) each(jq提供的)
	var str = '';
	$('#usersBox .userStatus:checked').each(function(index,element){
		str += '-'+$(element).attr('data-id') ;
	})
	var ids = str.slice(1);

	//发送ajax
	if(confirm('确定要批量删除吗?')){
		$.ajax({
			type:'delete',
			url:`/users/${ids}`,
			success:function(){
				location.reload()
			}
		})
	}
})